<template>
  <div class="image-banner sa-flex" :style="{ height: compData.data.height + 'px' }">
    <div class="banner-item" :style="[imageStyle(), { flex: compData.data.leftRatio }]">
      <sa-image
        v-if="compData.data.list.length > 0"
        :url="compData.data.list[0].src"
        fit="fill"
        radius="0"
        :suffix="null"
        :style="imageStyle()"
      ></sa-image>
      <div class="indicator">
        <sa-icon
          :icon="'sa-shop-decorate-imageBanner-indicator-' + compData.data.indicator"
          size="30"
        />
      </div>
    </div>
    <div
      class="right"
      :style="{ flex: compData.data.rightRatio, marginLeft: compData.data.space + 'px' }"
    >
      <div class="right-item" :style="[imgHeight(),{ flex: compData.data.rightTop }]">
        <sa-image
          v-if="compData.data.list.length > 0"
          :url="compData.data.menu1"
          fit="fill"
          radius="0"
          :suffix="null"
          :style="imageStyle()"
        ></sa-image>
      </div>
      <div
        class="right-item"
        :style="[imgHeight(),{ flex: compData.data.rightBottom, marginTop: compData.data.space + 'px' }]"
      >
        <sa-image
          v-if="compData.data.list.length > 0"
          :url="compData.data.menu2"
          fit="fill"
          radius="0"
          :suffix="null"
          :style="imageStyle()"
        ></sa-image>
      </div>
    </div>
  </div>
</template>

<script setup>
  const props = defineProps(['compData']);

	function imgHeight() {
    	return {
			height: `calc( (100%  -  ${props.compData.data.space}px ) / 2)`
		}
  }
  function imageStyle() {
    return {
      'border-radius': props.compData.data.radius + 'px',
    };
  }
</script>

<style lang="scss" scoped>
  .image-banner {
    .banner-item {
		height: 100%;
      position: relative;
      overflow: hidden;
      .indicator {
        position: absolute;
        bottom: 0;
        left: 50%;
        margin-left: -15px;

        :deep() {
          .sa-icon {
            color: #fff;
          }
        }
      }
    }
	.sa-image{
		width: 100%;
		height: 100%;
	}
   
    .right {
		height: 100%;
      
		display: flex;
		flex-direction: column;
		.right-item {
			width: 100%;
		}
    }
  }
</style>
